<template>
  <div class="cart_page">
    <table>
      <thead>
        <tr>
          <th style="width: 8%">
            <i
              :class="
                checkAll
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
              @click="checkAllFn(checkAll)"
            ></i>
          </th>
          <th style="width: 30%">礼品信息</th>
          <th>兑换分数</th>
          <th>数量</th>
          <th>小计 (鸡腿)</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in shopCartsArr" :key="item.id">
          <td>
            <i
              :class="
                checkList[index]
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
              @click="checkListFn(index)"
            >
            </i>
          </td>
          <td>
            <section @click="$router.push(`/details?id=${item.id}`)">
              <img
                width="84"
                :src="imgBaseUrl + item.coverImg"
                alt="列表图片"
              />
              <div class="info">
                <h5>{{ item.title }}</h5>
                <p>{{ item.versionDescription }}</p>
              </div>
            </section>
          </td>
          <td>{{ item.coin }}鸡腿</td>
          <td>
            <div class="step">
              <span @click="stepNumFn(index, -1)">-</span>
              <input type="text" disabled v-model="item.total" />
              <span @click="stepNumFn(index, +1)">+</span>
            </div>
          </td>
          <td>{{ item.totalCost }}鸡腿</td>
          <td>
            <span class="del" @click="delFn(item.id)">删除</span>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="total">
      总计：<span>{{ totalPrice }}鸡腿</span>
    </div>
    <div class="submit">提交</div>
  </div>
</template>
<script>
import { ShopCartsAPI, ShopCartsDelAPI } from "../../request/api";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      // 单选按钮数组
      checkList: [],
      // 购物车商品
      shopCartsArr: [],
    };
  },
  computed: {
    //计算总价
    totalPrice() {
      let totalPriceSum = this.shopCartsArr
        .filter((item, index) => {
          //当有选中才算价格
          return this.checkList[index] && item;
        })
        .reduce((pre, cur) => {
          return pre + cur.totalCost;
        }, 0);
      return totalPriceSum;
    },

    //全选
    checkAll: {
      get() {
        //如果有一个按钮没有选择,则取消全选
        return !this.checkList.includes(false);
      },
      set(newVal) {
        //如果全选按钮值变化,则单选按钮与全选按钮一样
        // console.log(newVal);
        this.checkList = this.checkList.map(() => {
          return newVal;
        });
      },
    },
  },
  created() {
    //发送查询购物车的请求
    this.requestShopCarts();
  },
  methods: {
    ...mapActions({
      asyncChangeToast: "showToast/asyncChangeToast",
    }),
    // 发送查询购物车请求
    async requestShopCarts() {
      //发送查询购物车请求
      let shopCartsRes = await ShopCartsAPI();
      if (!shopCartsRes) {
        return;
      }
      if (shopCartsRes.code == 0) {
        this.shopCartsArr = shopCartsRes.data;
        //初始化数据
        for(let i = 0;i<shopCartsRes.count;i++){
          this.checkList.push(true);
        }
      }
    },
    stepNumFn(index, val) {
      let item = this.shopCartsArr[index];
      if (item.total == 1 && val == -1) {
        return;
      }
      // 修改步进器
      item.total += val;
      // 修改小计
      item.totalCost = item.total * item.coin;
    },
    // 全选按钮
    checkAllFn(val) {
      // console.log("checkAllFn:",val);
      // 修改了checkAll的值,此时触发了checkAll计算属性的set方法
      this.checkAll = !val;
    },
    // 单选按钮
    checkListFn(index) {
      // console.log(this.checkList[index]);
      this.$set(this.checkList, index, !this.checkList[index]);
    },
    // 删除按钮
    async delFn(id) {
      //发送删除购物车商品的请求
      if (confirm("确认是否删除商品?")) {
        let ShopCartsDelRes = await ShopCartsDelAPI(id);
        if (!ShopCartsDelRes) {
          this.asyncChangeToast({
            // 是否显示提示框
            isShowToast: true,
            // 提示内容
            toastMsg: "删除失败",
            // 提示类型 success成功 error错误 warning警告
            toastType: "error",
          });
        }
        if (ShopCartsDelRes.code == 0) {
          this.asyncChangeToast({
            // 是否显示提示框
            isShowToast: true,
            // 提示内容
            toastMsg: "删除成功",
            // 提示类型 success成功 error错误 warning警告
            toastType: "success",
          });

          //重新发送查询购物车请求
          this.requestShopCarts();
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.cart_page {
  background: #fff;
  table {
    width: 100%;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
    color: #666;
    border-collapse: collapse;
    font-size: 14px;
    thead {
      background: #f2f2f2;
      th {
        padding: 19px 0;
        .iconfont {
          cursor: pointer;
        }
        .icon-yduifuxuankuangxuanzhong {
          color: #0a328e;
        }
      }
    }
    tbody {
      tr {
        td {
          vertical-align: middle;
          text-align: center;
          padding: 19px 0;
          table-layout: fixed; // td的宽度固定，不随内容变化
          .iconfont {
            cursor: pointer;
          }
          .icon-yduifuxuankuangxuanzhong {
            color: #0a328e;
          }
          section {
            padding-left: 20px;
            display: flex;
            box-sizing: border-box;
            cursor: pointer;
            img {
              margin-right: 12px;
            }
            .info {
              padding-top: 20px;
              flex: 1;
              overflow: hidden;
              box-sizing: border-box;
              text-align: left;
              h5 {
                overflow: hidden;
                color: #333;
                font-size: 18px;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 20px;
              }
              p {
                color: #666;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .step {
            width: 106px;
            height: 32px;
            margin: auto;
            span {
              float: left;
              width: 30px;
              height: 32px;
              display: block;
              border: solid 1px #d1d1d1;
              font-size: 20px;
              box-sizing: border-box;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 0px;
              color: #999999;
              text-align: center;
              cursor: pointer;
              background: #fff;
            }
            input {
              box-sizing: border-box;
              width: 46px;
              height: 32px;
              float: left;
              text-align: center;
              font-size: 14px;
              line-height: 23px;
              letter-spacing: 0px;
              color: #666666;
              border: 0;
              border-top: 1px solid #d1d1d1;
              border-bottom: 1px solid #d1d1d1;
              background: #fff;
            }
          }
          .del {
            border: 1px solid #ececec;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            &:hover {
              color: #fff;
              background: #0a328e;
            }
          }
        }
      }
    }
  }
  .total {
    padding: 30px 0;
    text-align: right;
    font-size: 22px;
    span {
      font-weight: bold;
      color: #fd604d;
    }
  }
  .submit {
    width: 175px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-family: SourceHanSansSC-Light;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
    cursor: pointer;
    background-color: #0a328e;
    float: right;
  }
}
</style>